GoogleMapEditor.js ➔ ??? - Code Metrics - Pixelneat/silverstripe-content-blocks - Measure and Improve Code Quality continuously with Scrutinizer

GoogleMapEditor.js ➔ ??? A
last analyzed 2017-08-08 11:49 UTC

↳ Parent: src/javascript/blocks/maps/modules/GoogleMapEditor.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	1
dl	0
loc	71
rs	9.1369
c	0
b	0
f	0
nop	2

8 Functions

Rating	Name	Size	Complexity
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onMarkerSave	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onMarkerPlaced	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onClickNavigationButton	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onMarkerDelete	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onLoad	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onCoordinatesChanged	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onMarkerClick	3	1
A	GoogleMapEditor.js ➔ ... ➔ this._defaults.closures.onZoomChanged	3	1

How to fix Long Method

/** global: google */

import {createNavigationButton} from '../functions/createNavigationButton';
import {createAddnewContainer} from '../functions/createAddnewContainer';
import {createEditorContainer} from '../functions/createEditorContainer';
import {createRandomId} from '../functions/createRandomId';
import Marker from './Marker';

class GoogleMapEditor {

    constructor(container, options = {}) {
        this._instance = null;
        this._container = container;
        this._markers = [];
        this._options = {};
        this._navigationButton = null;

        this._defaults = {
            map: {
                center: {
                    lat: 55.1309504,
                    lng: 24.5499231
                },
                zoom: 7,
                scrollwheel: false,
                navigationControl: true,
                mapTypeControl: false,
                scaleControl: true,
                draggable: true,
                streetViewControl: false
            },
            sprite: 'assets/images/sprite.png',
            closures: {
                onLoad: function (instance) {


                },

                onClickNavigationButton: function (instance) {
                    instance.onClickNavigationButton();
                },

                onMarkerClick: function (instance, marker) {
                    instance.onMarkerClick(marker);
                },

                onMarkerPlaced: function (instance, marker) {


                },

                onMarkerSave: function (instance, marker) {


                },

                onMarkerDelete: function (instance, marker) {


                },

                onZoomChanged: function (instance, zoomLevel) {


                },

                onCoordinatesChanged: function (instance, coordinates) {


                },
            },
            translations: {
                close: 'Close',
                address: 'Type your address',
                editMarker: 'Edit marker',
                displayInfo: 'Display info window?',
                content: 'Content',
                delete: 'Delete',
                save: 'Save'
            }
        };

        this.populateOptions(options);
        this.createInstance();
        this.populateMarkers();
        this.bindEvents();
    }

    getOptions() {
        return this._options;
    }

    bindEvents() {
        google.maps.event.addListenerOnce(this._instance, 'tilesloaded', () => {
            this._options.closures.onLoad(this);

            let sprite = this._options.sprite;
            let container = this._container;

            this._navigationButton = createNavigationButton(sprite, container);

            // initialize navigation button events
            this._navigationButton.addEventListener('click', () => {
                this._options.closures.onClickNavigationButton(this);
            });
        });

        google.maps.event.addListener(this._instance, 'zoom_changed', () => {
            this._options.closures.onZoomChanged(this, this._instance.getZoom());
        });

        google.maps.event.addListener(this._instance, 'dragend', () => {
            let center = this._instance.getCenter();
            this._options.closures.onCoordinatesChanged(this._instance, `${center.lat()},${center.lng()}`);
        });

        google.maps.event.addListener(this._instance, 'click', (event) => {
            this.placeMarker(event.latLng);
        });
    }

    onClickNavigationButton() {
        let container = createAddnewContainer(this._container, this._options.translations);
        let addressField = container.querySelector('input[name="address"]');

        addressField.focus();

        let searchBox = this.createSearchBox(addressField);

        searchBox.addListener('places_changed', () => {
            let places = searchBox.getPlaces();

            if (places.length == 0) return;
if (a > 0)
    b = 42;

            let bounds = new google.maps.LatLngBounds();

            places.forEach(place => {
                if (!place.geometry) return;
if (a > 0)
    b = 42;

                this.placeMarker(place.geometry.location, {address: place.formatted_address});

                if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });

            this._instance.fitBounds(bounds);
            container.parentNode.removeChild(container);
        });
    }

    collectFieldsData(container) {
        return {
            content: container.querySelector('textarea[name="content"]').value,
            displayWindow: container.querySelector('input[type="checkbox"]').checked
        };
    }

    onMarkerClick(marker) {
        if (!(marker instanceof Marker)) {
            return;
        }

        let container = createEditorContainer(this._container, this._options.translations, {
            address: marker.options.address,
            content: marker.options.content,
            displayWindow: marker.options.displayWindow
        });

        let searchBox = this.createSearchBox(container.querySelector('input[name="address"]'), container, false, marker);
        let bounds = null;

        searchBox.addListener('places_changed', () => {
            let places = searchBox.getPlaces();

            bounds = new google.maps.LatLngBounds();

            places.forEach(place => {
                if (!place.geometry) return;
if (a > 0)
    b = 42;

                marker.temporary = Object.assign(marker.temporary, {
                    location: place.geometry.location,
                    address: place.formatted_address
                });

                if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
        });

        container.querySelector('button[name="save"]').addEventListener('click', () => {
            let data = this.collectFieldsData(container);
            // save all temporary object to options and fit bounds if location was changed
            marker.options = Object.assign(marker.options, marker.temporary, data);

            if ('location' in marker.temporary) {
                marker.instance.setPosition(marker.options.location);
                this._instance.fitBounds(bounds);
            }

            if ('content' in data) {
                marker.instance.infoWindow.setContent(data.content);
            }

            marker.temporary = {};

            this._options.closures.onMarkerSave(this, marker);

            container.parentNode.removeChild(container);
        });

        container.querySelector('button[name="delete"]').addEventListener('click', () => {
            this._options.closures.onMarkerDelete(this, marker);
            this.removeMarker(marker);
            container.parentNode.removeChild(container);
        });
    }

    createSearchBox(inputField) {
        return new google.maps.places.SearchBox(inputField);
    }

    populateOptions(options = {}) {
        if ('map' in options) {
            options.map = Object.assign(this._defaults.map, options.map);
        }

        if ('closures' in options) {
            options.closures = Object.assign(this._defaults.closures, options.closures);
        }

        this._options = Object.assign(this._defaults, options);

        let data = this.getJSONOrEmpty(this._container.getAttribute('data-options'));

        if ('map' in data) {
            this._options.map = Object.assign(this._options.map, data.map);
            delete data['map'];
        }

        if ('closures' in data) {
            this._options.closures = Object.assign(this._options.closures, data.closures);
            delete data['closures'];
        }

        this._options = Object.assign(this._options, data);
    }

    populateMarkers() {
        let markers = this.getJSONOrEmpty(this._container.getAttribute('data-markers'));

        if(markers) {
            markers.forEach(marker => {
                let coordinates = marker.coordinates.split(',').map(Number).filter(x => !isNaN(x));

                this.placeMarker(new google.maps.LatLng(coordinates[0], coordinates[1]), {
                    address: marker.address || '',
                    content: marker.content || '',
                    displayWindow: marker.displayWindow,
                    instanceId: marker.instanceId
                }, false);
            });
        }
    }

    createInstance() {
        this._instance = new google.maps.Map(this._container, this._options.map);
    }

    placeMarker(location, settings = {}, useClosure = true) {
        let icons = {
            default: new google.maps.MarkerImage(
                this._options.sprite,
                new google.maps.Size(26, 32),
                new google.maps.Point(0, 32)
            ),
            active: new google.maps.MarkerImage(
                this._options.sprite,
                new google.maps.Size(26, 32),
                new google.maps.Point(32, 32)
            )
        };

        let marker = new Marker(Object.assign({
            instanceId: createRandomId(),
            markerImage: icons.default,
            location: location,
            draggable: true,
            infoWindowOn: 'hover',
            events: {
                onMouseover: (currentMarker) => {
                    currentMarker.instance.setIcon(icons.active);
                },

                onMouseout: (currentMarker) => {
                    currentMarker.instance.setIcon(icons.default);
                }
            }
        }, settings), this._instance);

        google.maps.event.addListener(marker.instance, 'click', () => {
            this._options.closures.onMarkerClick(this, marker);
        });

        google.maps.event.addListener(marker.instance, 'dragend', () => {
            this._options.closures.onMarkerSave(this, marker);
        });

        if (useClosure) {
            this._options.closures.onMarkerPlaced(this, marker);
        }

        this._markers.push(marker);
    }

    removeMarker(marker) {
        marker.instance.setMap(null);
        let key = false;

        this._markers.forEach((item, index) => {
            if (marker.instanceId == item.instanceId) {
                key = index;
            }
        });

        if (!isNaN(key)) {
            delete this._markers[key];
        }
    }

    getMarkers() {
        return this._markers;
    }

    getJSONOrEmpty(input) {
        if (typeof input == 'undefined' || input == '') {
            return {};
        }

        return JSON.parse(input);
    }
}

export default GoogleMapEditor;

1			/** global: google */
2
3			import {createNavigationButton} from '../functions/createNavigationButton';
4			import {createAddnewContainer} from '../functions/createAddnewContainer';
5			import {createEditorContainer} from '../functions/createEditorContainer';
6			import {createRandomId} from '../functions/createRandomId';
7			import Marker from './Marker';
8
9			class GoogleMapEditor {
10
11			constructor(container, options = {}) {
12			this._instance = null;
13			this._container = container;
14			this._markers = [];
15			this._options = {};
16			this._navigationButton = null;
17
18			this._defaults = {
19			map: {
20			center: {
21			lat: 55.1309504,
22			lng: 24.5499231
23			},
24			zoom: 7,
25			scrollwheel: false,
26			navigationControl: true,
27			mapTypeControl: false,
28			scaleControl: true,
29			draggable: true,
30			streetViewControl: false
31			},
32			sprite: 'assets/images/sprite.png',
33			closures: {
34			onLoad: function (instance) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
35
36			},
37
38			onClickNavigationButton: function (instance) {
39			instance.onClickNavigationButton();
40			},
41
42			onMarkerClick: function (instance, marker) {
43			instance.onMarkerClick(marker);
44			},
45
46			onMarkerPlaced: function (instance, marker) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history... Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `marker` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
47
48			},
49
50			onMarkerSave: function (instance, marker) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `marker` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history... Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
51
52			},
53
54			onMarkerDelete: function (instance, marker) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history... Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `marker` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
55
56			},
57
58			onZoomChanged: function (instance, zoomLevel) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history... Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `zoomLevel` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
59
60			},
61
62			onCoordinatesChanged: function (instance, coordinates) {
			0 ignored issues – show Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `coordinates` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history... Unused Code introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report The parameter `instance` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
63
64			},
65			},
66			translations: {
67			close: 'Close',
68			address: 'Type your address',
69			editMarker: 'Edit marker',
70			displayInfo: 'Display info window?',
71			content: 'Content',
72			delete: 'Delete',
73			save: 'Save'
74			}
75			};
76
77			this.populateOptions(options);
78			this.createInstance();
79			this.populateMarkers();
80			this.bindEvents();
81			}
82
83			getOptions() {
84			return this._options;
85			}
86
87			bindEvents() {
88			google.maps.event.addListenerOnce(this._instance, 'tilesloaded', () => {
89			this._options.closures.onLoad(this);
90
91			let sprite = this._options.sprite;
92			let container = this._container;
93
94			this._navigationButton = createNavigationButton(sprite, container);
95
96			// initialize navigation button events
97			this._navigationButton.addEventListener('click', () => {
98			this._options.closures.onClickNavigationButton(this);
99			});
100			});
101
102			google.maps.event.addListener(this._instance, 'zoom_changed', () => {
103			this._options.closures.onZoomChanged(this, this._instance.getZoom());
104			});
105
106			google.maps.event.addListener(this._instance, 'dragend', () => {
107			let center = this._instance.getCenter();
108			this._options.closures.onCoordinatesChanged(this._instance, `${center.lat()},${center.lng()}`);
109			});
110
111			google.maps.event.addListener(this._instance, 'click', (event) => {
112			this.placeMarker(event.latLng);
113			});
114			}
115
116			onClickNavigationButton() {
117			let container = createAddnewContainer(this._container, this._options.translations);
118			let addressField = container.querySelector('input[name="address"]');
119
120			addressField.focus();
121
122			let searchBox = this.createSearchBox(addressField);
123
124			searchBox.addListener('places_changed', () => {
125			let places = searchBox.getPlaces();
126
127			if (places.length == 0) return;
			0 ignored issues – show Coding Style Best Practice introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
128
129			let bounds = new google.maps.LatLngBounds();
130
131			places.forEach(place => {
132			if (!place.geometry) return;
			0 ignored issues – show Coding Style Best Practice introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
133
134			this.placeMarker(place.geometry.location, {address: place.formatted_address});
135
136			if (place.geometry.viewport) {
137			bounds.union(place.geometry.viewport);
138			} else {
139			bounds.extend(place.geometry.location);
140			}
141			});
142
143			this._instance.fitBounds(bounds);
144			container.parentNode.removeChild(container);
145			});
146			}
147
148			collectFieldsData(container) {
149			return {
150			content: container.querySelector('textarea[name="content"]').value,
151			displayWindow: container.querySelector('input[type="checkbox"]').checked
152			};
153			}
154
155			onMarkerClick(marker) {
156			if (!(marker instanceof Marker)) {
157			return;
158			}
159
160			let container = createEditorContainer(this._container, this._options.translations, {
161			address: marker.options.address,
162			content: marker.options.content,
163			displayWindow: marker.options.displayWindow
164			});
165
166			let searchBox = this.createSearchBox(container.querySelector('input[name="address"]'), container, false, marker);
167			let bounds = null;
168
169			searchBox.addListener('places_changed', () => {
170			let places = searchBox.getPlaces();
171
172			bounds = new google.maps.LatLngBounds();
173
174			places.forEach(place => {
175			if (!place.geometry) return;
			0 ignored issues – show Coding Style Best Practice introduced 2017-05-03 11:41 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
176
177			marker.temporary = Object.assign(marker.temporary, {
178			location: place.geometry.location,
179			address: place.formatted_address
180			});
181
182			if (place.geometry.viewport) {
183			bounds.union(place.geometry.viewport);
184			} else {
185			bounds.extend(place.geometry.location);
186			}
187			});
188			});
189
190			container.querySelector('button[name="save"]').addEventListener('click', () => {
191			let data = this.collectFieldsData(container);
192			// save all temporary object to options and fit bounds if location was changed
193			marker.options = Object.assign(marker.options, marker.temporary, data);
194
195			if ('location' in marker.temporary) {
196			marker.instance.setPosition(marker.options.location);
197			this._instance.fitBounds(bounds);
198			}
199
200			if ('content' in data) {
201			marker.instance.infoWindow.setContent(data.content);
202			}
203
204			marker.temporary = {};
205
206			this._options.closures.onMarkerSave(this, marker);
207
208			container.parentNode.removeChild(container);
209			});
210
211			container.querySelector('button[name="delete"]').addEventListener('click', () => {
212			this._options.closures.onMarkerDelete(this, marker);
213			this.removeMarker(marker);
214			container.parentNode.removeChild(container);
215			});
216			}
217
218			createSearchBox(inputField) {
219			return new google.maps.places.SearchBox(inputField);
220			}
221
222			populateOptions(options = {}) {
223			if ('map' in options) {
224			options.map = Object.assign(this._defaults.map, options.map);
225			}
226
227			if ('closures' in options) {
228			options.closures = Object.assign(this._defaults.closures, options.closures);
229			}
230
231			this._options = Object.assign(this._defaults, options);
232
233			let data = this.getJSONOrEmpty(this._container.getAttribute('data-options'));
234
235			if ('map' in data) {
236			this._options.map = Object.assign(this._options.map, data.map);
237			delete data['map'];
238			}
239
240			if ('closures' in data) {
241			this._options.closures = Object.assign(this._options.closures, data.closures);
242			delete data['closures'];
243			}
244
245			this._options = Object.assign(this._options, data);
246			}
247
248			populateMarkers() {
249			let markers = this.getJSONOrEmpty(this._container.getAttribute('data-markers'));
250
251			if(markers) {
252			markers.forEach(marker => {
253			let coordinates = marker.coordinates.split(',').map(Number).filter(x => !isNaN(x));
254
255			this.placeMarker(new google.maps.LatLng(coordinates[0], coordinates[1]), {
256			address: marker.address \|\| '',
257			content: marker.content \|\| '',
258			displayWindow: marker.displayWindow,
259			instanceId: marker.instanceId
260			}, false);
261			});
262			}
263			}
264
265			createInstance() {
266			this._instance = new google.maps.Map(this._container, this._options.map);
267			}
268
269			placeMarker(location, settings = {}, useClosure = true) {
270			let icons = {
271			default: new google.maps.MarkerImage(
272			this._options.sprite,
273			new google.maps.Size(26, 32),
274			new google.maps.Point(0, 32)
275			),
276			active: new google.maps.MarkerImage(
277			this._options.sprite,
278			new google.maps.Size(26, 32),
279			new google.maps.Point(32, 32)
280			)
281			};
282
283			let marker = new Marker(Object.assign({
284			instanceId: createRandomId(),
285			markerImage: icons.default,
286			location: location,
287			draggable: true,
288			infoWindowOn: 'hover',
289			events: {
290			onMouseover: (currentMarker) => {
291			currentMarker.instance.setIcon(icons.active);
292			},
293
294			onMouseout: (currentMarker) => {
295			currentMarker.instance.setIcon(icons.default);
296			}
297			}
298			}, settings), this._instance);
299
300			google.maps.event.addListener(marker.instance, 'click', () => {
301			this._options.closures.onMarkerClick(this, marker);
302			});
303
304			google.maps.event.addListener(marker.instance, 'dragend', () => {
305			this._options.closures.onMarkerSave(this, marker);
306			});
307
308			if (useClosure) {
309			this._options.closures.onMarkerPlaced(this, marker);
310			}
311
312			this._markers.push(marker);
313			}
314
315			removeMarker(marker) {
316			marker.instance.setMap(null);
317			let key = false;
318
319			this._markers.forEach((item, index) => {
320			if (marker.instanceId == item.instanceId) {
321			key = index;
322			}
323			});
324
325			if (!isNaN(key)) {
326			delete this._markers[key];
327			}
328			}
329
330			getMarkers() {
331			return this._markers;
332			}
333
334			getJSONOrEmpty(input) {
335			if (typeof input == 'undefined' \|\| input == '') {
336			return {};
337			}
338
339			return JSON.parse(input);
340			}
341			}
342
343			export default GoogleMapEditor;

Pixelneat / silverstripe-content-blocks

GoogleMapEditor.js ➔ ??? A last analyzed 2017-08-08 11:49 UTC

Complexity

Size

Duplication

Importance

8 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

GoogleMapEditor.js ➔ ??? A
last analyzed 2017-08-08 11:49 UTC